<template>
    <div id="nav" class="container-fluid row white_text" style="background-color: #22B3C8">
      <div class="col-xs-3">
        <div class="row">
          <div class="col-xs-2 text-center">
            <img id="logo" src="/static/pic/logo.png" alt="暂时无法显示"/>
          </div>
          <div class="col-xs-10">
            <p class="font_size_20" id="nav_college_name">黄淮学院</p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <p class="font_size_20" id="nav_system_name">考勤管理系统</p>
          </div>
        </div>
      </div>

      <div class="col-xs-4"></div>

      <div class="col-xs-5">
        <div class="row">
          <div class="col-xs-12 text-right">
            <p class="font_size_20" id="nav_welcome_msg">{{teacher}}(0010010010),欢迎使用系统</p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 text-right">
            <p class="font_size_20" id="nav_role">角色:{{jue_se}}</p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <el-menu style="background-color: #22B3C8;" mode="horizontal">
              <el-menu-item index="1" class="el_menu ee">
                <template slot="title">
                  <router-link to="/teacher/AContent" class="white_text el-icon-open ee" tag="i">
                    退出
                  </router-link>
                </template>
              </el-menu-item>
<!--              <el-menu-item index="2" class="el_menu ee">-->
<!--                <template slot="title">-->
<!--                  <router-link to="/teacher/BContent" class="white_text el-icon-refresh ee" tag="i">-->
<!--                    切换角色-->
<!--                  </router-link>-->
<!--                </template>-->
<!--              </el-menu-item>-->
            </el-menu>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    computed: {
      ...mapState(['teacher']),
      jue_se() {
        const path = this.$route.path
        const t = path.search(/teacher/i)
        const a = path.search(/admin/i)
        if (t > 0) {
          return "教师"
        } else if (a > 0) {
          return "管理员"
        } else {
          return "未知身份"
        }
      }
    }
  }
</script>

<style scoped>
  .white_text {
    color: white !important;
    font-size: 20px !important;
  }
  .font_size_20 {
    font-size: 20px;
  }
  #nav {
    padding: 20px;
  }
  #nav_college_name {
    margin-left: 10px;
    margin-top: 10px;
  }
  #nav_system_name {
    margin-top: 20px;
  }
  #nav_change_role {
    text-decoration-line: none;
  }
  #nav_change_role:hover {
    color: blue;
  }
  #nav_exit {
    text-decoration-line: none;
  }
  #nav_exit:hover {
    color: blue;
  }
  .text_style {
    color: white;
    font-size: 20px;
  }
  .el_menu {
    margin-right: 40px;
    float: right !important;
  }

  .ee {
    background-color: #22B3C8 !important;
  }
  .ee:hover {
    background-color: #22B3C8 !important;
  }
</style>
